<template lang="html">
    <div
        :class="$style.search"
        v-loading="loading"
    >
        <el-form
            :inline="true"
            ref="searchForm"
            :model="searchForm"
            :rules="searchRules"
            status-icon
        >
            <el-row
                type="flex"
                justify="space-between"
            >
                <el-col
                    :span="20"
                >
                    <el-form-item
                        prop="resource_url"
                    >
                        <el-input
                            placeholder="请输入资源链接"
                            v-model="searchForm.resource_url"
                            style="min-width:500px"
                            auto-complete="on"
                        >
                            <!-- <template slot="prepend">
                                    http://
                                </template> -->
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col
                    :span="6"
                    :offset="1"
                >
                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="getTypes"
                        >
                            开始解析
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item
                        v-for="item in types"
                        :key="item.id"
                    >
                        <el-button @click="download(item)">
                            {{ item['name'] }}
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
// import {
//     parseUrl
// } from "@/utils/tools"
import {
    getToken,
    setToken,
    removeToken,
    setCookie
} from '@/utils/cookie'
export default {
    data() {
        return {
            loading: false,
            types: [],
            searchForm: {
                resource_url: '',
                type: ''
            },
            searchRules: {
                resource_url: {
                    type: "url",
                    required: true,
                    // validator: valiUrl,
                    message: "url格式错误",
                    trigger: "blur"
                },
                type: {
                    type: "enum",
                    enum: ['rar', 'pic'],
                    message: "类型错误",
                    // validator: valiType,
                    trigger: "blur"
                }
            }
        }
    },
    methods: {
        getTypes() {
            this.$refs['searchForm'].validate(valid => {
                if (valid) {
                    // this.searchForm.type = "rar"
                    this.loading = true
                    this.$store
                        .dispatch("getTypes", this.searchForm)
                        .then(res => {
                            let that = this;
                            that.loading = false;
                            this.$message({
                                message: "请选择需要下载的格式",
                                type: "success",
                                duration: 2000
                            })
                            this.types = res.data;
                        })
                        .catch(err => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });
        },
        download(item) {
            this.$refs['searchForm'].validate(valid => {
                if (valid) {
                    this.loading = true
                    this.$store
                        .dispatch("download", item.id)
                        .then(res => {
                            let that = this;
                            that.loading = false;
                            window.open(res.data);
                        })
                        .catch(err => {
                            this.loading = false;
                        });
                } else {
                    return false;
                }
            });

        },
        changeType(type) {
            this.searchForm.type = type
        }
    },
    watch: {},
    mounted() {}
}
</script>

<style lang="scss" scoped module>
.search {
    width: 600px;
    margin: 50px auto 0;
    align-items: center;
    .leftS {
        float: left;
    }
    .rightS {
        float: right;
    }
    .timeline {
        h4 {
            font-weight: 400;
            color: #1f2f3d;
            display: block;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0;
            margin-inline-end: 0;
        }
        p {
            font-size: 14px;
            color: #5e6d82;
            line-height: 1.5em;
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
        }
    }
}
</style>
